<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;
        padding: 0;}

        body{position: relative;}

        .nei{
        height: 30px;
        
        position: absolute;
        }

        .wai{width: 500px;
        height: 20px;
        overflow: hidden;
        position: absolute;
        left: 100px;
        top: 200px;
        border-radius: 20px;
        border: crimson 1px solid;}
    </style>
</head>
<body>
    
    <p><input class="p0" value=""/></p>

    <div class="wai">
        <div class="nei" style="background-color: crimson;width: 500px;"></div>
    </div>
    
</body>
</html>
<script>
    let p0=prompt("小时");
    let p1=prompt("分钟");
    let p2=prompt("秒");
    p0=parseInt(p0);
    p1=parseInt(p1);
    p2=parseInt(p2);
    let sj=3600*1000*p0+60000*p1+1000*p2;
    let da=sj;
        setInterval(bao,1000)
    let nei=document.querySelector(".nei");
  

function bao(){


    sj=parseInt(sj-1000);
    let po=parseFloat(sj/da)*500;
    // po=parseInt(po);
    
    let shi=parseInt(sj/(3600*1000));
    let shi1=shi*3600*1000;
    let feng=parseInt((sj-shi1)/60000);
    let feng1=feng*60000;
    let miao=parseInt((sj-shi1-feng1)/1000);
    let p=document.querySelector(".p0");
    p.value=`${shi}小时${feng}分${miao}秒`;
    nei.style.width=po+"px";
    if(sj==0){
        alert("结束");
    }
}

</script>